<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>

  <script>

    /* const p = new Promise((resolve, reject) => {  // 执行器是同步执行
      // 立即发请求
      $.get(url, (data) => {
        resolve(data)
      })
    })
    
    setTimeout(() => {
      p.then(value => {
        
      })
    }, 3000); */
    // 指定成功的回调是在发请求前还是发请求后?  在执行器中立即发请   在发请求后, 发请完成前  
    // 如何在发请求前指定回调函数?  在执行器中延迟发送请求
    // 如何在请求完成后指定回调函数?  延迟指定回调函数






    
    /* 
    .then()返回的promise的结果状态由什么决定?
      简单说: 由.then()指定并执行的回调函数的执行结果决定
      详细说: 
        抛出错误: promise失败, 失败的reason是3
        返回一个失败的promise: promise失败, 失败的reason就是返回的promise的reason
        返回一个成功的promise: promise成功, 成功的value就是返回的promise的value
        返回一个非promise值: promise成功, 成功的value就是返回的值
    */
    /* new Promise((resolve, reject) => {
      // resolve(1)
      reject(2)
    }).then(
      value => {
        console.log('onResolved1', value)
      },
      reason => {
        console.log('onRejected1', reason)
        // 抛出错误: promise失败, 失败的reason是3
        // throw 3
        // 返回一个失败的promise: promise失败, 失败的reason就是返回的promise的reason
        // return Promise.reject(4)

        // 返回一个成功的promise: promise成功, 成功的value就是返回的promise的value
        // return Promise.resolve(5)

        // 返回一个非promise值: promise成功, 成功的value就是返回的值
        // return 6

        // Promise.reject(4)   // 如果不return, 不会影响then返回的promise
      }
    ).then(
      value => {
        console.log('onResolved2', value)
      },
      reason => {
        console.log('onRejected2', reason)
      }
    )
 */




    /* 
    Promise.all()
    */
   /*  function ajax(url) {
      return axios.get(url)
    }
    const p1 = ajax(url1)
    const p2 = ajax(url2)
    const p3 = ajax(url3)
    Promise.all([p1, p2, p3])
      .then(
        responses => { // 得到包含3个成功数据的response的数组
          // 发送第4个请求
          return ajax(url4)
        }
      ).then(response4 => {  // 第4个请求成功的回调

      }).catch(error => { // 只要有一个失败了

      })
 */
    /* 
    1. 哪里用await: 一般在结果为promise的表达式左侧
        如果await 右侧表达式结果不是promise, 直接得到这个结果
    2. 如果用async: 离await最近的函数定义的左侧

    成功的value: await左侧以级下面的代码都是在成功之后执行(相当于在成功的回调中执行)
    失败的reason: 使用try...catch中在失败后执行(相当于在失败的回调中执行)

    调用async函数的得到是一个promise对象, promise的结果由aysnc函数体执行的结果决定(与.then类似)
     */

    function ajax(url) {
      return axios.get(url)
    }

    /* 
    async函数执行返回一个promise
    promse的状态由 async函数体执行的结果 决定
    */
    async function getProduct() {
      const url = '/1_js基础/product.json'
      try {
        const response = await axios.get(url)
        console.log('请求成功', response.data)
        return response.data
      } catch (error) {
        alert(error.message)
        // throw error
        return Promise.reject(error)
      }
    }

    function fn() {
      return {m: 1}
    }

    async function test() {
      getProduct().then(value => {
        console.log('---', value)
      }, reason => {
        console.log('+++', reason)
      })

      const result = await fn();  // 如果await右侧不是promise, await的结果就是结果值本身
      console.log(result)
    }

    test()

  </script>
</body>
</html>